@use './vars.scss' as *;

////////////////////////////
// MEDIA QUERIES (WIDTH)
/////////////////////////////

@mixin extra-small-break {
  @media (max-width: $breakpoint-xs-width) {
    @content;
  }
}

@mixin small-break {
  @media (max-width: $breakpoint-s-width) {
    @content;
  }
}

@mixin mid-break {
  @media (max-width: $breakpoint-m-width) {
    @content;
  }
}

@mixin mobile-header-break {
  @media (max-width: $breakpoint-mh-width) {
    @content;
  }
}

@mixin mid-plus-break {
  @media (max-width: $breakpoint-mp-width) {
    @content;
  }
}

@mixin large-mid-break {
  @media (max-width: $breakpoint-lm-width) {
    @content;
  }
}

@mixin large-break {
  @media (max-width: $breakpoint-l-width) {
    @content;
  }
}

@mixin extra-large-break {
  @media (max-width: $breakpoint-xl-width) {
    @content;
  }
}

@mixin two-extra-large-break {
  @media (max-width: $breakpoint-2xl-width) {
    @content;
  }
}

////////////////////////////
// MEDIA QUERIES (HEIGHT)
/////////////////////////////

@mixin large-break-ht {
  @media (max-height: $breakpoint-l-height) {
    @content;
  }
}
